<template>
    <view>
        <view class="tab-bar" v-if="tabs.length > 0"></view>
        <view class="tab-bar fixed-bottom bg-tab" v-if="tabs.length > 0">
            <view
                :class="{ checked: tabIndex === index }"
                v-for="(item, index) in tabs"
                :key="index"
                @click="setTabsIndex(index)"
            >
                <slot name="common" :data="item.name"></slot>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
    computed: {
        ...mapGetters(["tabs", "tabIndex"])
    },
    methods: {
        ...mapActions(["setTabsIndex"])
    }
};
</script>

<style scoped>
.tab-bar {
    height: 100rpx;
    width: 100vw;

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.bg-tab {
    background: #ffffff;
}

.tab-bar > view {
    flex: 1;
    text-align: center;
    height: 100rpx;
    line-height: 100rpx;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
}

.checked {
    background: #eee;
}
</style>
